<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预约课程</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/js/bootstrap/bootstrap-v4.3.1.min.css">
    <link rel="stylesheet" type="text/css" href="/css/reservation.css">
</head>
<body>
<div th:replace="header :: header"></div>
<div class="container function">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="reservationsClass-tab" data-toggle="tab" href="#reservationsClass"
               role="tab" aria-controls="reservationsClass" aria-selected="true">预约课程</a>
            <a class="nav-item nav-link" id="reservationsHistory-tab" data-toggle="tab" href="#reservationsHistory"
               role="tab" aria-controls="reservationsHistory" aria-selected="false">未开课预约记录</a>
            <a class="nav-item nav-link" id="doneReservationsHistory-tab" data-toggle="tab"
               href="#doneReservationsHistory" role="tab" aria-controls="doneReservationsHistory"
               aria-selected="false">已结束预约记录</a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade  p-2 show active" id="reservationsClass" role="tabpanel"
             aria-labelledby="reservationsClass-tab">
<!--            <div class="search-box card">-->
<!--                <div class="row card-body">-->
<!--                    <div class="col-md-6">-->
<!--                        <h5 style="display: inline-block;">-->
<!--                            按条件搜索-->
<!--                        </h5>-->
<!--                    </div>-->
<!--                    <div class="col-md-6 text-right">-->
<!--                        <button class="btn btn-primary p-1">搜索</button>-->
<!--                    </div>-->
<!--                    <hr class="col-md-12">-->
<!--                    <div class="row col-md-12">-->
<!--                        <div class="col-md-3">-->
<!--                            <p>按时间</p>-->
<!--                            <input class="form-control" type="date">-->
<!--                        </div>-->
<!--                        <div class="col-md-3">-->
<!--                            <p>按课程类型</p>-->
<!--                            <input class="form-control" type="text">-->
<!--                        </div>-->
<!--                        <div class="col-md-3">-->
<!--                            <p>按课程名</p>-->
<!--                            <input class="form-control" type="text">-->
<!--                        </div>-->
<!--                        <div class="col-md-3">-->
<!--                            <p>按老师名</p>-->
<!--                            <input class="form-control" type="text">-->
<!--                        </div>-->
<!--                    </div>-->

<!--                </div>-->
<!--            </div>-->
            <table class="table text-center table-striped  shadow">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">时间</th>
                    <th scope="col">类型</th>
                    <th scope="col">名称</th>
                    <th scope="col">老师</th>
                    <th scope="col">已预约/总人数</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody id="rese-class-msg-container"></tbody>
            </table>
        </div>
        <div class="tab-pane fade p-2" id="reservationsHistory" role="tabpanel" aria-labelledby="servationsHistory-tab">
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>时间</th>
                    <th>类型</th>
                    <th>老师</th>
                    <th>课程名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="rese-class-historyMsg-container"></tbody>
            </table>
        </div>
        <div class="tab-pane fade p-2" id="doneReservationsHistory" role="tabpanel"
             aria-labelledby="doneReservationsHistory-tab">
            <table class="table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>时间</th>
                    <th>类型</th>
                    <th>老师</th>
                    <th>课程名</th>
                </tr>
                </thead>
                <tbody id="rese-class-doneHistoryMsg-container"></tbody>
            </table>
        </div>
    </div>
</div>
<!--  模板开始  -->
<script type="text/html" id="rese-class-msg-art">
    {{ if courseList && courseList.length>0 }}{{each courseList}}
    <tr>
        <th class="align-middle" scope="row">{{$index+1}}</th>
        <td class="align-middle">{{$value.COURSE_TIME | formatDateString }}</td>
        <td class="align-middle">{{$value.COURSE_TYPE_NAME}}</td>
        <td class="align-middle">{{$value.COURSE_NAME}}</td>
        <td class="align-middle">{{$value.COURSE_TEACHER_NAME}}</td>
        <td class="align-middle">{{$value.COURSE_DONE_STU_NBR}}/{{$value.COURSE_STU_NBR}}</td>
        <!--<td class="align-middle">{{$value.place}}</td>-->
        <td class="align-middle">
            <p><a href="javascript:;" class="detailed text-decoration-none font-italic"
                  data-courseid="{{$value.COURSE_ID}}">详情</a>
            </p>
            <p><a href="javascript:;" class="text-decoration-none font-italic reservation-btn"
                  data-courseid="{{$value.COURSE_ID}}">预约</a></p>
        </td>
    </tr>
    {{/each}}{{/if}}
</script>
<script type="text/html" id="rese-class-historyMsg-art">
    {{ if historyList && historyList.length>0 }}{{each historyList}}
    <tr>
        <th class="align-middle" scope="row">{{$index+1}}</th>
        <td class="align-middle">{{$value.course_TIME | formatDateString }}</td>
        <td class="align-middle">{{$value.course_TYPE_NAME}}</td>
        <td class="align-middle">{{$value.course_TEACHER_NAME}}</td>
        <td class="align-middle">{{$value.course_NAME}}</td>
        <td class="align-middle">
            <p><a href="javascript:;" class="detailed text-decoration-none font-italic"
                  data-courseid={{$value.course_ID}}>详情</a>
            </p>
            <p><a href="javascript:;" class="text-decoration-none font-italic cancel-reservation-btn"
                  data-courseid={{$value.course_ID}}>取消</a></p>
        </td>
    </tr>
    {{/each}}{{/if}}
</script>
<script type="text/html" id="rese-class-doneHistoryMsg-art">
    {{ if doneHistoryList && doneHistoryList.length>0 }}{{each doneHistoryList}}
    <tr>
        <th class="align-middle" scope="row">{{$index+1}}</th>
        <td class="align-middle">{{$value.course_TIME | formatDateString }}</td>
        <td class="align-middle">{{$value.course_TYPE_NAME}}</td>
        <td class="align-middle">{{$value.course_TEACHER_NAME}}</td>
        <td class="align-middle">{{$value.course_NAME}}</td>
    </tr>
    {{/each}}{{/if}}
</script>
<!--  模板结束  -->
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap/popper.min.js"></script>
<script src="/js/bootstrap/bootstrap-v4.3.1.min.js"></script>
<script src="/js/app.js"></script>
<script>
    // template 时间日期格式功能
    template.helper('formatDateString', function (value) {
        return new Date(value).format('yyyy-MM-dd hh:mm:ss');
    });
    var reservation = (function () {
        var bindEvents = function () {
            reservation.getClassList();
            reservation.el('.reservationsHistory-tab').off('click').on('click',function () {
                reservation.getClassList();
            });
        };
        return {
            data: {},
            el: function (expr) {
                return $(expr ? expr : 'body');
            },
            init: function () {
                App.getUserMsg().then(function () {App.setWhere('reservation');return this;})
                    .then(function(){bindEvents();return this});
                return this
            },
            // 获取所有的数据列表
            getClassList: function () {
                reservation.getCanReservationList();
                reservation.getHistoryList();
                reservation.getDoneHistory();
            },
            getCanReservationList: function () {
                $.loadJSON('/dtr/rese/getList').done(function (data) {
                    if (!App.checker(data)) {
                        return;
                    } else {
                        reservation.el("#rese-class-msg-container").html(template('rese-class-msg-art', {courseList: data.courseList}));
                        reservation.panelClick();
                        return;
                    }
                });
            },
            getHistoryList: function () {
                $.loadJSON('/dtr/rese/getSelfHistory', {}).done(function (data) {
                    if (!App.checker(data)) {
                        return;
                    } else {
                        if (data.noReservationList != '') {
                            reservation.el("#rese-class-historyMsg-container")
                                .html("<tr><td colspan='6' style='text-align: center'>"+data.noReservationList+"</td></tr>");
                        } else {
                            reservation.el("#rese-class-historyMsg-container")
                                .html(template('rese-class-historyMsg-art', {historyList: data.reservationList}));
                            reservation.panelClick();
                        }
                        return;
                    }
                });
            },
            getDoneHistory: function () {
                $.loadJSON('/dtr/rese/getSelfHistory', {}).done(function (data) {
                    if (!App.checker(data)) {
                        return;
                    } else {
                        if (data.noReservationDoneList != '') {
                            reservation.el("#rese-class-doneHistoryMsg-container").html("<tr><td colspan='6' style='text-align: center'>"+data.noReservationDoneList+"</td></tr>");
                        } else {
                            reservation.el("#rese-class-doneHistoryMsg-container").html(template('rese-class-doneHistoryMsg-art', {doneHistoryList: data.reservationDoneList}));
                            reservation.panelClick();
                        }
                        return;
                    }
                });

            },
            //  后置才能触发的按钮
            panelClick: function () {
                reservation.el('.detailed').off('click').on('click', function () {
                    var index = $(this).data("courseid");
                    $.loadJSON('/dtr/rese/getCourseDet', {
                        courseID: index
                    }).done(function (data) {
                        if (!App.checker(data)) {
                            return;
                        } else {
                            App.alert('课程内容详细信息', data.courseDet.course_DETAIL, '');
                            return;
                        }
                    });
                });
                reservation.el('.reservation-btn').off('click').on('click', function () {
                    var index = $(this).data("courseid");
                    $.loadJSON('/dtr/rese/reseCourse', {
                        courseID: index
                    }).done(function (data) {
                        if (!App.checker(data)) {
                            return;
                        } else {
                            App.alert('预约成功！', '', 1);
                            reservation.getClassList();
                            return;
                        }
                    });
                });
                reservation.el('.cancel-reservation-btn').off('click').on('click', function () {
                    var index = $(this).data("courseid");
                    App.selectAlert('操作提示','确定吗',4,function(){
                        $.loadJSON('/dtr/rese/unReseCourse', {
                            courseID: index
                        }).done(function (data) {
                            if (!App.checker(data)) {
                                return;
                            } else {
                                App.alert('取消成功','');
                                reservation.getClassList();
                                return;
                            }
                        });
                    });
                });
            },
        }
    })();
    $(function () {
        reservation.init();
    })
</script>
</body>
</html>